<script>
/**
 * @desc '个人'-->'订单'-->'订单详情'
 */

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('MyOrders')

export default {
  name: 'order-detail',
  computed: { ...mapState(['orderDetail']) },
  methods: { ...mapActions(['getOrderDetail']) },

  onLoad(options) {
    this.getOrderDetail(options.id).then(() => {
      console.log(this.orderDetail)
    })
  }
}
</script>

<template>
  <div class="order-detail">
    <div class="route-info">
      <img :src="orderDetail.picture" class="preview" mode="aspectFill"/>
      <div class="about">
        <p class="name">{{orderDetail.name}}</p>
        <p class="label">{{orderDetail.label}}</p>
        <!-- <span class="visa" v-if="orderDetail.isVisa"></span> -->
      </div>
    </div>

    <div class="packages">
      <div
        v-for="(v,i) in orderDetail.packages"
        :key="i"
        class="package-item"
      >
        <span class="package-name">{{v.name}}</span>
        <span class="package-quantity">x{{v.quantity}}</span>
        <span class="package-price">￥{{v.price}}</span>
      </div>
    </div>

    <div class="total-price">总价: ￥{{orderDetail.totalAmount}}</div>

    <div class="order-info">
      <div class="order-info-item">
        <span class="title">订单编号</span>
        <span class="val">{{orderDetail.orderNumber}}</span>
      </div>
      <div class="order-info-item">
        <span class="title">下单时间</span>
        <span class="val">{{orderDetail.createTime}}</span>
      </div>
      <div class="order-info-item">
        <span class="title">出行时间</span>
        <span class="val">{{orderDetail.travelDate}}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
